<template>
  <!--  搜索部分     -->
  <div class="head_l">
    <!--  天气icon    -->
    <!--    <div class="weather">-->
    <!--      <el-tooltip class="item" effect="dark" :content="weatherTip" placement="top-start">-->
    <!--        <img :src="weatherIcon" alt="">-->
    <!--      </el-tooltip>-->
    <!--    </div>-->
    <!-- 定位 -->
    <div>
      <el-popover
          placement="bottom"
          width="230"
          trigger="click">
        下属行政区查询
        <div class="input-item">
          <div class="input-item-prepend"><span class="input-item-text">省市区</span></div>
          <el-select value-key="name" size="mini" v-model="province" @change="provinceChange($event,'province')"
                     placeholder="请选择" style="width: 58%!important;">
            <el-option
                v-for="item in provinceList"
                :key="item.adcode"
                :label="item.name"
                :value="item">
            </el-option>
          </el-select>
        </div>
        <div class="input-item">
          <div class="input-item-prepend"><span class="input-item-text">地级市</span></div>
          <el-select value-key="name" size="mini" v-model="city" @change="provinceChange($event,'city')"
                     placeholder="请选择" style="width: 58%!important;">
            <el-option
                v-for="item in cityList"
                :key="item.adcode"
                :label="item.name"
                :value="item">
            </el-option>
          </el-select>
        </div>
        <div class="input-item">
          <div class="input-item-prepend"><span class="input-item-text">区县</span></div>
          <el-select value-key="name" size="mini" v-model="district" @change="provinceChange($event,'district')"
                     placeholder="请选择" style="width: 58%!important;">
            <el-option
                v-for="item in districtList"
                :key="item.adcode"
                :label="item.name"
                :value="item">
            </el-option>
          </el-select>
        </div>
        <div slot="reference">
                <span class="el-dropdown-link">
                            {{ centerCity }}<i class="el-icon-arrow-down el-icon--right"></i>
                          </span>
        </div>

      </el-popover>
    </div>

  </div>

</template>

<script>
import AMap from 'AMap'

export default {
  name: 'Gmap',
  data () {
    return {
      /* 天气icon */
      q: require('@/assets/img/mapImg/q.svg'),
      dy: require('@/assets/img/mapImg/dy.svg'),
      feng: require('@/assets/img/mapImg/feng.svg'),
      lzy: require('@/assets/img/mapImg/lzy.svg'),
      wu: require('@/assets/img/mapImg/wu.svg'),
      y: require('@/assets/img/mapImg/y.svg'),
      ydy: require('@/assets/img/mapImg/ydy.svg'),
      yq: require('@/assets/img/mapImg/yq.svg'),
      yu: require('@/assets/img/mapImg/yu.svg'),
      /* 天气icon */
      /* ======= 地图相关数据 ============== */
      centerCity: '',             // 中心城市
      weatherIcon: '',             // 天气icon 图标转世
      weatherTip: '',               // 天气tip
      province: '',               // 省
      city: '', // 市
      district: '', // 县区
      provinceList: [], // 省list
      cityList: [], // 城市list
      districtList: [], // 县区list
      partyOrganId: [],
      props: {
        value: 'value',
        children: 'cities',
        lazy: true,
        lazyLoad (node, resolve) {
          if (node.level <= 3) {

          }
        }
      }
    }
  },
  created () {
    this.initCity()
  },
  methods: {
    /* ================  地图相关 ==================   */
    provinceChange (val, level) {
      // 清空下一级别的下拉列表
      if (level === 'province') {
        this.province = val.name
        this.city = ''
        this.district = ''
        this.area = ''
        this.$emit('upMap', val, level)
      } else if (level === 'city') {
        this.city = val.name
        this.district = ''
        this.area = ''
        this.$emit('upMap', val, level)
      } else if (level === 'district') {
        this.district = val.name
        this.area = ''
        let otherAddress = this.province + this.city + this.district
        this.$emit('upMap', val, level, otherAddress)
      }
      this.centerCity = val.name
      this.weatherFun(this.centerCity)
      let district = new AMap.DistrictSearch()
      district.search(val.adcode, (status, result) => {
        if (status === 'complete') {
          if (level === 'province') {
            this.cityList = result.districtList[0].districtList
          }
          if (level === 'city') {
            this.districtList = result.districtList[0].districtList
          }
        }
      })
    },
    //  初始化 天气和省市区
    initCity () {
      let that = this
      var opts = {
        subdistrict: 1,   // 返回下一级行政区
        showbiz: false    // 最后一级返回街道信息
      }
      this.district = new AMap.DistrictSearch(opts)// 注意：需要使用插件同步下发功能才能这样直接使用
      this.district.search('中国', (status, result) => {
        if (status === 'complete') {
          this.provinceList = result.districtList[0].districtList
        }
      })

      // 获取当前位置
      AMap.plugin('AMap.Geolocation', function () {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, // 是否使用高精度定位，默认：true
          convert: true,
          showMarker: true,
          panToLocation: true,
          timeout: 10000
        })
        geolocation.getCurrentPosition((status, res) => {
          if (status === 'complete') {
            console.log(res, '根据ip 获取当前位置 完成')
            that.centerCity = res.addressComponent.city
            let otherAddress = res.addressComponent.province + res.addressComponent.city + res.addressComponent.district + res.addressComponent.street
            that.$emit('upMap', res.addressComponent, 'city', otherAddress)
            // 加载天气组组件
            // that.weatherFun(that.centerCity)
          } else if (status === 'error') {
            that.$message.warning('IP 定位失败,请手动选择')
            console.log('IP 定位失败')
          }
        })
      })
      /* ================  地图相关 结束 ==================   */
    },
    weatherFun (city) {
      // 加载天气查询插件
      AMap.plugin('AMap.Weather', () => {
        // 创建天气查询实例
        var weather = new AMap.Weather()
        // 执行实时天气信息查询
        weather.getLive(city, (err, data) => {
          let weather = data.weather
          this.weatherTip = weather
          let str = this.q
          if (weather === '晴') {
            str = this.q
          } else if (weather === '阴') {
            str = this.y
          } else if (weather.indexOf('云') > -1) {
            str = this.dy
          } else if (weather.indexOf('风') > -1) {
            str = this.feng
          } else if (weather === '雷阵雨') {
            str = this.lzy
          } else if (weather.indexOf('雨') > -1) {
            str = this.yu
          } else if (weather.indexOf('雪') > -1) {
            str = this.xue
          } else if (weather.indexOf('雾') > -1) {
            str = this.wu
          }
          this.weatherIcon = str
        })
      })
    }
  }
}
</script>

<style lang="less">
.head_l {
  display: flex;
  align-items: center;

  .weather {
    width: 20px;
    height: 20px;

    img {
      width: 100%;
      max-height: 100%;
    }

    margin-right: 10px;
  }
}

.center_city {
  display: flex;
  align-items: center;
  flex-direction: column;

  .p1 {
    display: inline-block;
    width: 100%;
    font-size: 14px;
    text-align: left;
    text-indent: 1.5em;
  }

  & > div {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
}

.input-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;

  .input-item-text {
    width: 70px;
    text-align: center;
    padding: 0 0.7rem;
    display: inline-block;
    text-justify: distribute-all-lines;
    text-align-last: justify;
    align-items: center;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 28px;
    color: #495057;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-right: 0;
  }
}


</style>
